<template>
  <el-scrollbar v-loading="loading" class="view-box"><div id="epub" /></el-scrollbar>
</template>

<script>
import Epub from 'epubjs';

export default {
  props: {
    file: {
      type: Object,
      required: true
    },
    preview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileurl: this.file ? this.file.playurl : ''
    };
  },
  mounted() {
    var book = Epub(this.fileurl);
    var rendition = book.renderTo('epub', {
      width: 1040,
      height: 500,
      manager: 'continuous',
      flow: 'scrolled',
      layout: 'spread', // 设置布局为分页
      spreadMethod: 'paginated' // 使用分页方式进行分页
    });
    rendition.display();
  }
};
</script>

<style scoped>
.view-box {
  width: 100%;
  height: 500px;
}
.pageButton {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.pageButton .el-button {
  margin: 0 10px;
}
</style>
